<template>
  <div class="login-container">
    <div class="login-form">
      <div class="form-header">
        <h2 class="form-title">AI Shop 管理后台</h2>
      </div>
      
      <el-form 
        ref="loginFormRef" 
        :model="form" 
        :rules="rules" 
        label-width="80px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input 
            v-model="form.username" 
            placeholder="请输入用户名"
            prefix-icon="User"
          />
        </el-form-item>
        
        <el-form-item label="密码" prop="password">
          <el-input 
            v-model="form.password" 
            placeholder="请输入密码"
            type="password"
            prefix-icon="Lock"
            show-password
          />
        </el-form-item>
        
        <el-form-item>
          <el-button 
            type="primary" 
            class="form-button" 
            @click="handleLogin"
            :loading="loading"
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import useUserStore from '../store/user.js'

export default {
  name: 'Login',
  setup() {
    const router = useRouter()
    const userStore = useUserStore()
    const loginFormRef = ref(null)
    const loading = ref(false)
    
    // 表单数据 - 设置mock数据
    const form = reactive({
      username: 'admin',
      password: 'admin123'
    })
    
    // 表单验证规则
    const rules = {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
      ]
    }
    
    // 处理登录
    const handleLogin = async () => {
      try {
        await loginFormRef.value.validate()
        loading.value = true
        
        // 模拟登录请求
        setTimeout(() => {
          // 模拟登录成功，获取token和用户信息
          const token = 'mock-jwt-token-123456'
          const userInfo = {
            id: 1,
            name: '管理员',
            role: 'admin',
            permissions: ['all']
          }
          
          // 保存用户信息和token
          userStore.login(token, userInfo)
          
          // 跳转到首页
          router.push('/')
          loading.value = false
        }, 1000)
      } catch (error) {
        console.error('登录表单验证失败:', error)
        loading.value = false
      }
    }
    
    return {
      form,
      rules,
      loginFormRef,
      loading,
      handleLogin
    }
  }
}
</script>

<style scoped lang="scss">
/* 样式已在components.scss中定义 */
</style>